<template>
  <div>
    <TopNav title="我的跟帖" @jumpPage="$router.push('/personal')" />
    <div class="myComment" v-for="comment in commentList" :key="comment.id">
      <div class="date">2020-09-30</div>
      <!-- 根据是否有父评论显示父评论 -->
      <div class="replyWrapper" v-if="comment.parent">
        <div class="reply">回复：{{ comment.parent.user.nickname }}</div>
        <div class="replyComment">
          {{ comment.parent.content }}
        </div>
      </div>
      <div class="title">{{ comment.content }}</div>
      <div
        class="commentWrapper"
        @click="$router.push('/postdetails/?id=' + comment.post.id)"
      >
        <div class="comment">
          {{ comment.post.title }}
        </div>
        <span class="iconfont iconjiantou1"></span>
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from "../../components/TopNav";
export default {
  data() {
    return {
      commentList: [],
    };
  },
  components: {
    TopNav,
  },
  created() {
    //   发送请求获取用户的跟帖数据
    this.$axios({
      url: "/user_comments",
    }).then((res) => {
      console.log(res);
      //   获取的数据绑定data
      this.commentList = res.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
.myComment {
  padding: 20/360 * 100vw;
  border-bottom: 2px solid #e4e4e4;
  .date {
    font-size: 14/360 * 100vw;
    color: #888;
  }
  .replyWrapper {
    padding: 10/360 * 100vw;
    margin-top: 10/360 * 100vw;
    // margin: 10/360 * 100vw 0;
    background-color: #e4e4e4;
    .reply {
      font-size: 12/360 * 100vw;
      color: #888;
      margin-top: 4/360 * 100vw;
      margin-bottom: 10/360 * 100vw;
    }
    .replyComment {
      font-size: 14/360 * 100vw;
      color: #888;
    }
  }
  .title {
    font-size: 14/360 * 100vw;
    color: #333;
    margin: 20/360 * 100vw 0;
  }
  .commentWrapper {
    display: flex;
    justify-content: space-between;
    .comment {
      font-size: 14/360 * 100vw;
      color: #888;
      width: 270/360 * 100vw;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .iconjiantou1 {
      font-size: 16/360 * 100vw;
      color: #333;
    }
  }
}
</style>
